共计 5358 个字符，预计需要花费 14 分钟才能阅读完成。
环境搭建 (Windows)
创建虚拟环境
virtualenv django_env
django_envScriptsactivate # 激活虚拟环境
django_envScriptsdeactivate # 退出 依赖包安装
pip install django
pip install djangorestframework
pip install PymySQL
pip install pillow
pip install django-redis
pip list # 查看虚拟环境中安装的包
pip freeze > requirements.txt # 收集当前环境中安装的包及其版本
pip install -r requirements.txt # 安装项目使用到的模块 项目搭建
mkdir django
cd django
django-admin startproject siteapi使用 PyCharm 打开新建的项目 siteapi，点击「File」->「Settings」->「Project: siteapi」->「Python Interpreter」。
点击右上角的⚙️->「Add…」->「Existing environment」，找到虚拟环境下的 Python 解释器（django_envScriptspython.exe）。
打开 manage.py，右键「Run ‘manage’」，点击右上角「manage」->「Edit Configurations…」，在 Parameters: 填入参数：runserver 0.0.0.0:8000。
重新运行 manage.py，然后浏览器访问 http://127.0.0.1:8000/。
调整目录结构
在项目文件夹下新建 logs 目录，用来存放日志文件；新建 scripts 包，用来存放项目运行时的脚本文件。
在 siteapi 目录下新建包：apps、libs、utils（分别用来存放开发的代码、第三方库、开发的组件）。
在 siteapi 目录下新建 settings 包，包下面新建文件：dev.py、prod.py（分别用来存放项目开发时的本地配置、项目上线时的运行配置），然后把 settings.py 重命名为 settings_origin.py。把 settings_origin.py 文件的内容复制到 dev.py 中。
修改 manage.py 文件中的 os.environ.setdefault(‘DJANGO_SETTINGS_MODULE’, ‘siteapi.settings’) 为 os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'siteapi.settings.dev')。
创建代码版本
cd django
git init
git add .
git commit -m '项目搭建和调整目录结构'
git remote add origin 远程仓库地址
git push -u origin "master"
git branch dev # 创建分支
git checkout dev # 切换分支 日志配置
在 siteapisettingsdev.py 文件尾部添加：
## 日志配置
LOGGING = {
'version': 1,
'disable_existing_loggers': False,
# 日志格式
'formatters': {
'verbose': {'format': '%(levelname)s %(asctime)s %(module)s %(lineno)d %(message)s',
},
'simple': {'format': '%(levelname)s %(message)s',
},
},
# 日志过滤信息
'filters': {
'require_debug_true': {'()': 'django.utils.log.RequireDebugTrue',
},
},
# 日志处理方式
'handlers': {
'console': {
'level': 'DEBUG',
'filters': ['require_debug_true'],
'class': 'logging.StreamHandler',
'formatter': 'simple'
},
'file': {
'level': 'INFO',
'class': 'logging.FileHandler',
'filename': Path.joinpath(BASE_DIR.parent, 'logs/site.log'),
'formatter': 'verbose'
},
},
'loggers': {
'django': {'handlers': ['console', 'file'],
'propagate': True,
},
}
}异常处理
在 siteapiutils 目录下新建文件：exceptions.py，输入以下内容：
from rest_framework.views import exception_handler
from django.db import DatabaseError
from rest_framework.response import Response
from rest_framework import status
import logging
logger = logging.getLogger('django')
def custom_exception_handler(exc, context):
"""
自定义异常处理
exc：本次请求发生的异常信息
context：本次请求发生异常的执行上下文
"""
response = exception_handler(exc, context)
if response is None:
"""
到这里只有 2 种情况：要么程序没出错
要么出错了而 Django 或者 restframework 不识别
"""
view = context['vies']
if isinstance(exc, DatabaseError):
# 数据库异常
logger.error('[%s] %s' % (view, exc))
response = Response({'message': '服务器内部错误，请联系客服工作人员！'}, status=status.HTTP_507_INSUFFICIENT_STORAGE)
return response在 siteapisettingsdev.py 文件尾部添加：
## 异常处理
REST_FRAMEWORK = {'EXCEPTION_HANDLER': 'siteapi.utils.exceptions.custom_exception_handler'}数据库配置
## 连接数据库
mysql -u root -p
## 创建数据库
create database siteapi charset=utf8mb4;
## 创建数据库用户
create user siteapi_user identified by '123';
grant all privileges on siteapi.* to 'siteapi_user'@'%';
flush privileges;接下来，在 siteapisettingsdev.py 文件中进行配置和修改：
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'siteapi',
'USER': 'siteapi_user',
'PASSWORD': '123',
'HOST': '127.0.0.1',
'PORT': 3306,
}
}在 siteapi__init__.py 文件中添加如下代码：
import pymysql
pymysql.install_as_MySQLdb()前端搭建
Node.js 安装，官网下载地址：https://nodejs.org/en/download/
npm config set registry https://registry.npm.taobao.org
npm install --global vue-cli
vue -V # 检查是否安装成功 创建项目
cd django
vue init webpack site_pc
? Project name site_pc
? Project description A Vue.js project
? Author google <qq@qq.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
cd site_pc
npm run dev 打开浏览器，访问 http://localhost:8080，查看效果。
使用 PyCharm 打开新建的项目 site_pc，点击右上角 [Add Configurations…] -> 左上角 [+]，找到 npm 选中，在 Scripts: 填入：dev。
初始化
删掉 srcrouterindex.js 文件里面的如下代码：
import HelloWorld from '@/components/HelloWorld'
name: 'HelloWorld',
component: HelloWorld清除 srcAPP.vue 中的默认样式：img 标签和 #app。
删除默认的 HelloWorld 组件（srccomponentsHelloWorld.vue）。
前端首页
在 srccomponents 目录下新建文件：Home.vue，然后到 srcrouterindex.js 文件进行引入：
import Home from "../components/Home"
export default new Router({
mode: "history",
routes: [
{
path: '/',
name: 'Home',
component: Home
}, {
path: '/home',
name: 'Home',
component: Home
}
]
})初始化全局变量和方法
在 src 目录下新建文件：settings.js，并添加：
export default {"HOST": "http://localhost:8080/",}在 srcmain.js 中引入：
import settings from "./settings"
Vue.prototype.$settings = settings引入 ElementUI
npm i element-ui -S在 srcmain.js 中导入 ElementUI，并调用：
// element-ui 配置
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 调用插件
Vue.use(ElementUI)成功引入 ElementUI，就可以开始进入前端页面开发，首先是首页。
在 static 目录下新建目录：css，在 css 目录下新建文件：reset.css，写入：
/* 声明全局样式和项目的初始化样式 */
body, h1, h2, h3, h4, p, table, tr, td, ul, li, a, form, input, select, option, textarea{
margin: 0;
padding: 0;
font-size: 15px;
}
a{
text-decoration: none;
color: #333;
}
ul, li{list-style: none;}
table{
/* 合并边框 */
border-collapse: collapse;
}
/* 工具的全局样式 */
.full-left{float: left!important;}
.full-right{float: right!important;}
[class*="el-icon-"], [class^=el-icon-]{font-size: 50px;}
.el-carousel__arrow{
width: 120px;
height: 120px;
}
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner{
background: #ffc210;
border-color: #ffc210;
border: none;
}
.el-checkbox__inner:hover{border-color: #9b9b9b;}
.el-checkbox__inner{
width: 16px;
height: 16px;
border: 1px solid #9b9b9b;
border-radius: 0;
}
.el-checkbox__inner:after{
height: 9px;
width: 5px;
}
在 srcmain.js 中导入 css 初始化样式：import '../static/css/reset.css'srccomponents 目录下新建文件：Header.vue、Banner.vue、Footer.vue。
